(function () {
    // 重构
    const dataList = [
        {
            href: "https://ow.blizzard.cn/heroes/mercy",

            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_mercy_2508ddd39a178d5f6ae993ab43eeb3e7961e5a54a9507e6ae347381193f28943.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "天使"
        },

        {
            href: "https://ow.blizzard.cn/heroes/ana",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_ana_3429c394716364bbef802180e9763d04812757c205e1b4568bc321772096ed86.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "安娜"
        },

        {
            href: "https://ow.blizzard.cn/heroes/zenyatta",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_zenyatta_71cabc939c577581f66b952f9c70891db779251e8e70f29de3c7bf494edacfe4.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "神雅塔"
        },

        {
            href: "https://ow.blizzard.cn/heroes/brigitte",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_brigitte_48392820c6976ee1cd8dde13e71df85bf15560083ee5c8658fe7c298095d619a.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "布里吉塔"
        },
        {
            href: "https://ow.blizzard.cn/heroes/moira",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_moira_000beeb5606e01497897fa9210dd3b1e78e1159ebfd8afdc9e989047d7d3d08f.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "莫伊拉"
        },
        {
            href: "https://ow.blizzard.cn/heroes/baptiste",
            type: "support",
            img: "https://overwatch.nosdn.127.net/ow2heroes/heroes/images/overwatch_baptiste_f979896f74ba22db2a92a85ae1260124ab0a26665957a624365e0f96e5ac5b5c.png",
            heroRole: "https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/Dark_Circle_Support.svg",
            span: "巴蒂斯特"
        },
    ]

    // 初始化内容
    $(function () {
        render(dataList)
    })

    // 渲染数据
    function render(arr) {
        let str = ''
        // 遍历数组
        arr.forEach(item => {
            const { href, img, heroRole, span } = item
            str += `
                <div class="hero-card">
    
                            <a href="${href}" target="_blank">
                                <div class="hero-img">
                                    <img src="${img}" alt="">
                                </div>
                                <div class="hero-name">
                                    <img src="${heroRole}"
                                        alt="" class="hero-role">
                                    <span>${span}</span>
                                </div>
                            </a>
    
                        </div>
                `
        });
        document.querySelector('.hero-list').innerHTML = str
    }
})();

(function () {
    // 获取父元素
    const ab = document.querySelector('.ab_flex')

    // 事件委托
    ab.addEventListener('click', function (e) {
        if (e.target.tagName == 'IMG') {
            let numid = e.target.dataset.id
            // 切换按钮选中效果
            ab.querySelector('.active').classList.remove('active')
            e.target.parentElement.classList.add('active')
            document.querySelector('.ac .active').classList.remove('active')
            document.querySelector(`.item:nth-child(${numid})`).classList.add('active')
        }
    })
})();